<template>
  <card-container
    title="意见反馈"
    width="938px"
    style="margin-bottom: 100px;padding-bottom: 40px;"
  >
    <div class="feedback-container">
      <div class="feedback-center">
        <div class="feedback-container__header">
          <div class="input-box">
            <input type="radio" id="web-advice" value="网站建议" v-model="typePicked">
            <label for="web-advice">网站建议</label>
          </div>
          <div class="input-box">
            <input type="radio" id="function-advice" value="功能提议" v-model="typePicked">
            <label for="function-advice">功能提议</label>
          </div>
          <div class="input-box">
            <input type="radio" id="other" value="其它" v-model="typePicked">
            <label for="other">其它</label>
          </div>
        </div>
        <div class="feedback-container__main">
          <textarea class="feedback-header" placeholder="相关链接" v-model="feedLink"></textarea>
          <textarea class="feedback-content" placeholder="我的反馈是..." v-model="feedbackContent"></textarea>
          <div class="main-footer">
            <p class="img-box">添加反馈图片（可选）
              <img :src="imgSrc" alt="">
              <input type="file" @change="(e)=>changeToUploadCover(e)">
            </p>
            <login-input
              style="width: 334px;margin-top: 20px;"
              :error-message="phoneErrMsg"
              placeholder="联系方式（可选）"
              v-model="mobile"
              @handleCheck="checkMobile"
              @cancelCheck="phoneErrMsg = ''"
              @keyup.enter.native="handleFeedback"
            ></login-input>

            <!--<login-input-->
              <!--style="width: 334px;"-->
              <!--:error-message="verifyErrMsg"-->
              <!--:isCount="isCount"-->
              <!--placeholder="请输入验证码"-->
              <!--input-type="3"-->
              <!--v-model="verifyCode"-->
              <!--@sendSms="checkVerification"-->
              <!--@handleCheck="checkVerifyCode"-->
              <!--@cancelCheck="verifyErrMsg = ''"-->
              <!--@keyup.enter.native="handleFeedback"-->
            <!--&gt;</login-input>-->
          </div>
        </div>
        <div class="feedback-container__submit">
          <button @click="handleFeedback">提交</button>
        </div>
      </div>
    </div>
  </card-container>
</template>

<script>
import CardContainer from "../../components/pc/cardContainer";
import LoginInput from "../../components/pc/loginCard/loginInput";
import config from '../../action/config';
import {checkPhone, checkVerification} from '../users/checkfrom';

export default {
  name: "feedback",
  components: {LoginInput, CardContainer},
  data() {
    return {
      feedLink: '',
      typePicked: '',
      feedbackContent: '',
      phoneErrMsg: '',
      mobile: '',
      verifyCode: '',
      verifyErrMsg: '',
      imgSrc: '',
      isCount: false
    }
  },
  methods: {
    checkMobile() {
      if (this.mobile !== '') {
        this.phoneErrMsg = checkPhone(this.mobile);
      }
    },
    // checkVerifyCode() {
    //   this.verifyErrMsg = checkVerification(this.verifyCode);
    // },
    // // 检测验证码
    // checkVerification() {
    //   this.isCount = false;
    //   this.phoneErrMsg = checkPhone(this.mobile);
    //   if (this.phoneErrMsg === '') {
    //     this.getSms();
    //     this.verifyErrMsg = '';
    //     this.isCount = true;
    //     setTimeout(() => {
    //       this.isCount = false;
    //     }, 60000);
    //   }
    // },
    // 发送短信
    // async getSms() {
    //   let smsResponse = await this.$axios.$get(config.api.get.Sms.send, {
    //     params: {
    //       mobile: this.mobile
    //     }
    //   });
    //   if (smsResponse.code === 0) {
    //     this.$message({
    //       type: 'success',
    //       message: '短信发送成功！'
    //     });
    //   } else {
    //     this.verifyErrMsg = smsResponse.msg;
    //     this.$message({
    //       type: 'info',
    //       message: smsResponse.msg
    //     });
    //   }
    // },
    //上传图片
    async changeToUploadCover(e) {

      let formData = new window.FormData();
      formData.append('file', e.target.files[0]);
      formData.append('type', 100);
      const isLt5M = (e).target.files[0].size / 1024 / 1024 < 5;
      if (!isLt5M) {
        this.$message.error('图片大小超过5M，请重新选择图片！');
        return false
      }
      let imgResponse = await this.$axios.$post(config.api.post.Resource.file, formData);
      if (imgResponse.code === 0) {
        this.imgSrc = imgResponse.data;//图片地址
        this.$message({
          type: 'success',
          message: '图片上传成功'
        })
      } else {
        this.$message({
          type: 'warning',
          message: imgResponse.msg
        })
      }

    },

    handleFeedback() {
      if (this.typePicked === '') {
        this.$message({
          type: 'warning',
          message: '请选择反馈类型'
        });
        return false

      } else if (this.feedbackContent === '') {
        this.$message({
          type: 'warning',
          message: '请填写反馈内容'
        });
        return false
      } else if (this.phoneErrMsg !== '') {
        this.$message({
          type: 'warning',
          message: '请检查联系方式'
        });
        return false
      }
      this.$axios.$post(config.api.post.Feedback.feedback, {
        content: this.feedbackContent,
        feedbackReason: this.typePicked,
        link: this.feedLink,
        mobile: this.mobile,
        picture: this.imgSrc
      }).then(res => {
        if (res.code === 0) {
          this.$message({
            type: 'success',
            message: '您的意见反馈成功'
          });
          Object.assign(this.$data, this.$options.data());
        } else {
          let msg;
          if (res.hasOwnProperty('data')) {
            msg = res.data.errMsg;
          } else {
            msg = res.msg;
          }
          this.$message({
            type: 'warning',
            message: msg
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .feedback-container {
    .feedback-center {
      width: 726*$length;
      margin: 38*$length auto;

      .feedback-container__header {
        @extend %flex-row-spb;
        justify-content: flex-start;

        .input-box {
          margin-right: 40*$length;

          input[type="radio"] {
            display: none;
          }

          label {
            @include fontStyle(14, 19, 500, #666, left);
            vertical-align: middle;
          }

          input[type="radio"] + label::before {
            content: "\a0"; /*不换行空格*/
            display: inline-block;
            vertical-align: baseline;
            width: 16*$length;
            height: 16*$length;
            line-height: 16*$length;
            margin-right: 8*$length;
            border-radius: 50%;
            border: 1*$length solid #F0F0F0;
            background-color: #F4F5F5;
          }

          input[type="radio"]:checked + label::before {
            display: inline-block;
            vertical-align: baseline;
            width: 10*$length;
            height: 10*$length;
            line-height: 10*$length;
            margin-right: 8*$length;
            border: 4*$length solid #75D098;
            border-radius: 50%;
          }
        }
      }
      .feedback-container__main {
        margin-top: 30*$length;
        .feedback-header{
          @include fontStyle(14,19,500,#666,left);
          resize: none;
          width: 726*$length;
          height: 48*$length;
          padding: 14*$length 16*$length;
          background-color: #F4F8FA;
          @include border-radius(4*$length);
          margin-bottom: 24*$length;
        }
        .feedback-content {
          @include fontStyle(14,19,500,#666,left);
          resize: none;
          width: 726*$length;
          height: 200*$length;
          padding: 18*$length 16*$length;
          background-color: #F4F8FA;
          @include border-radius(4*$length);
        }
        .main-footer{
          margin-top: 24*$length;
          @extend %flex-row-spb;
          align-items: flex-end;
          .img-box {
            margin-bottom: 20*$length;
            overflow: hidden;
            width: 196*$length;
            background-color: #F4F8FA;
            @extend %cursorPointer;
            @include border-radius(4*$length);
            @include fontStyle(12, 130, 500, #999, center);

            & input {
              float: left;
              height: 100%;
              width: 100%;
              opacity: 0;
              transform: translateY(-200%);
              @extend %cursorPointer;
            }

            & img {
              float: left;
              height: 100%;
              width: 100%;
              transform: translateY(-100%);
              object-fit: contain;
            }
          }
        }
      }
      .feedback-container__submit {
        margin-top: 40*$length;
        text-align: center;
        > button {
          @include fontStyle(14,19,500,#fff,center);
          @include border-radius(4*$length);
          @extend %cursorPointer;
          display: inline-block;
          width: 148*$length;
          height: 48*$length;
          background-color: rgba(117, 208, 152, .9);
          border: none;
          &:hover{
            background-color: #75D098;
          }
        }
      }
    }
  }
</style>
